<template>
 <div class="login-box">
        <!-- 通过:rules="loginFormRules"来绑定输入内容的校验规则 -->
        <el-form :rules="loginFormRules" ref="loginForm" :model="loginForm" label-position="right" label-width="auto" show-message>
            <span class="login-title">欢迎登录</span>
            <div style="margin-top: 5px"></div>
            <el-form-item label="用户名" prop="loginName">
                <el-col :span="22">
                    <el-input type="text" v-model="loginForm.loginName"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="密码" prop="loginPassword">
                <el-col :span="22">
                    <el-input type="password" v-model="loginForm.loginPassword"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="loginSubmit()">登录</el-button>
                <el-button type="primary">注册</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'Login',
  data () {
    return {
      loginForm: {
        loginName: '',
        loginPassword: ''
      },
      // 表单验证，需要在 el-form-item 元素中增加 prop 属性
      loginFormRules: {
        loginName: [
          {required: true, message: '账号不可为空', trigger: 'blur'}
        ],
        loginPassword: [
          {required: true, message: '密码不可为空', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    loginSubmit () {
      let formData = new FormData()
      formData.append('username', this.loginForm.loginName)
      formData.append('password', this.loginForm.loginPassword)
      axios({
        withCredentials: true,
        maxRedirects: 0,
        method: 'post',
        url: '/auth',
        headers: {
          'Content-Type': 'multipart/form-data',
          'Access-Control-Allow-Origin': 'true'
        },
        data: formData,
        timeout: 4000
      }).then((res) => {
        console.log(res)
      }, ErrorEvent => {
        this.$message.error('登陆失败')
      })
    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login-box {
        border: 1px solid #DCDFE6;
        width: 350px;
        margin: 180px auto;
        padding: 35px 35px 15px 35px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        box-shadow: 0 0 25px #B0C4DE;
    }
    .login-title {
        text-align: center;
        margin: 0 auto 40px auto;
        color: #00BFFF;
        font-size: 30px;
        font-weight: bold;
    }
</style>
